<template>
	<div class="tag">
		<YRCardTitle title="标签云"></YRCardTitle>
		<div class="content">
			<Tag :checked="true" :color="item.color" @click.native="queryArticle(item)" v-for="(item, index) in tagList" :key="index">{{ item.name }}</Tag>
		</div>
	</div>
</template>

<script>
import YRCardTitle from '@/components/common/YRCardTitle.vue';
import { listTag } from '@/api/tag';
export default {
	name: 'YRTag',
	components: {
		YRCardTitle
	},
	props: {
		title: String,
		list: {
			type: Array,
			default: () => []
		}
	},
	data: () => {
		return {
			tagList: []
		};
	},
	methods: {
		getTagList() {
			listTag().then(res => {
				this.tagList = res.data.map(e => {
					e.checked = true;
					return e;
				});
			});
		},
		queryArticle(item) {
			if (this.$router.history.current.path != '/article/articleList') {
				this.$router.push({ path: '/article/articleList', query: { tagId: item.id } });
			} else {
				this.$router.push({ path: '/article/articleList', query: { tagId: item.id } });
			}
		}
	},
	created() {
		this.getTagList();
	}
};
</script>

<style lang="stylus" scoped="scoped">
.tag
	border-radius 10px
	overflow auto
	box-shadow 0 0 0 2px rgba(0, 0, 0, 0.02), 0 4px 10px rgba(0, 0, 0, 0.06)
	.content
		padding 10px
		background #fff
		border-top 1px solid #eee
		opacity 0.6
		min-height 120px
		text-align center
		.ivu-tag
			cursor pointer
			opacity 0.9
</style>
